@charset'UTF-8';
 /**
 * 黑五预热页
 * @Author river
 * @email lijiang@ymatou.com
 * @Date 2015/11/09
 */
 @import'../_components/variables.scss';
 @import'../_components/_mixin.scss';
 @import'../_components/reset.scss';

 $rem: 1rem/32;

//满图背景
.bg__full{
    background-size:contain;
    background-repeat:no-repeat;
    background-position: center;
}

.mask{
    position: fixed;
    z-index: 99;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;

    background: rgba(0,0,0,.7);
    &.open
    {
        display: block;
    }
}

.bf-container{

}

.bf-flow{
    height:$rem*105;
    background:#f24036;
    overflow:hidden;
    color:#fff;
    font-size:$rem*24;
    ul{
        overflow:hidden;
        height:100%;
    }
    li{
        width:25%;
        text-align:center;
        float:left;
        padding-top:$rem*20;
        height:100%;
        position:relative;
        &.active{
            color:#fde63a;
        }
        &.diagonal {
            &:after{
                width:1px;
                height:70%;
                background:#fff;
                content:'';
                display:inline-block;
                position:absolute;
                right:0;
                top:20%;
                transform: rotate(18deg);
            }
        }
        &:nth-child(3){
            width:22%;
        }
        &:last-child{
            background:#53494a;
            position:relative;
            width:28%;
            padding-left:$rem*40;
            &:before{
                content:'';
                height:0;
                width:0;
                border:$rem*53 solid transparent;
                border-left:$rem*53 solid #f24036;
                position:absolute;
                left:-1px;
                top:0;
            }
        }
    }
}

.bf-banner-hd{
    background:url(http://pm3.img.ymatou.com/G02/M05/30/C7/CgvUBVZCKWaABTcbAAG9KH1eAY8233_o.jpg) no-repeat;
    height:$rem*558;
    background-size:100% 100%;
}

//大转盘
.bf-turntable{
    background:#feffef;
    margin:$rem*20 0;
    padding-bottom:$rem*60;
    &-hd{
        background-image:url(http://pm5.img.ymatou.com/G02/M03/65/48/CgvUBVZFpfOAZEh3AAAuH2mUJGY650_o.png);
        width:$rem*550;
        height:$rem*82;
        margin:0 auto;
        margin-bottom:-$rem*7.5;
        position: relative;
        @extend .bg__full;
    }
    &-bd{
        margin-bottom:$rem*60;
    }
    &-ft{
        color:#40210d;
        font-size:$rem*22;
        padding:0 $rem*30;
    }
}


.turntable-box{
    width:$rem*648;
    background:#410006;
    padding-left:$rem*12;
    padding-top:$rem*12;
    border-radius:$rem*20;
    margin:0 auto;
    overflow:hidden;
    .board,
    .starter{
        height: 100%;
        width:100%;
    }
    .turntable-grid{
        float: left;
        width:$rem*200;
        height:$rem*200;
        border-radius:$rem*12;
        margin-right:$rem*12;
        padding-bottom:$rem*15;
        margin-bottom:$rem*12;
    }
    .board{
        box-shadow: 0 $rem*15 #FF8377;
        background-color: #FEFFEF;
        border-radius:$rem*20;
        padding-top:$rem*10;
        .pic{
            width:100%;
            height:$rem*140;
        }
        .txt{
            color:#fe8479;
            font-size:$rem*20;
            text-align:center;
        }
        .coupon{
            background:url(http://pm1.img.ymatou.com/G02/M06/30/C8/CgvUBVZCKYmAUBXZAAAEYL0aLp8429_o.png) no-repeat;
            background-size:contain;
            width:$rem*174;
            height:$rem*82;
            text-align:center;
            color:#fff;
            line-height:$rem*82;
            margin:$rem*30 auto;
            margin-bottom:$rem*20;
            font-weight:bold;
            small,
            span{
                font-weight:100;
            }
        }
        &.active{
            background-size: $rem*80 $rem*80; /* 控制条纹的大小 */
            background-image: -webkit-gradient(linear, 0 100%, 100% 0,
                                  color-stop(.25, rgba(255, 57, 38,1)), color-stop(.25, rgba(252, 102, 87,.8)),
                                  color-stop(.5, rgba(252, 102, 87,.8)), color-stop(.5, rgba(255, 57, 38,1)),
                                  color-stop(.75, rgba(255, 57, 38,1)), color-stop(.75, rgba(252, 102, 87,.8)),
                                  to(rgba(252, 102, 87,.8)));
            box-shadow: 0 0.46875rem #feffef;
            .coupon{
                color:#ff8478;
                background-image:url(http://pm4.img.ymatou.com/G02/M06/31/67/CgvUA1ZCKZWANTfAAAAGWN7dp8o205_o.png);
            }
            .txt{
                color:#fff;
            }
        }

    }
    .turntable-grid-btn{
        padding-bottom:0;
    }
    .starter{
        background-image:url(http://pm2.img.ymatou.com/G02/M04/30/C6/CgvUBVZCKS-ASzl5AAArNr4xkUw173_o.png);
        border:0;
        background-color: #410006;
        @extend .bg__full;
    }
}

.rule-title{
    background-image:url(http://pm1.img.ymatou.com/G02/M03/30/CB/CgvUBVZCKk-AdbvRAAALTQ3S9tw925_o.png);
    display:block;
    width:$rem*172;
    height:$rem*33;    margin:$rem*40 auto $rem*20;
    @extend .bg__full;

}
.rule-content{
    font-size:$rem*22;
    color:#44210e;
    .retract{
        position:relative;
        margin-top:$rem*30;
        &:before{
            content:'';
            position:absolute;
            height:$rem*12;
            width:$rem*12;
            display:block;
            border-top:2px solid #42210e;
            border-right:2px solid #42210e;
            top:$rem*-20;
            left:50%;
            transform: translate(-50%,0) rotate(-45deg);
            transition: transform 0.25s ease-in-out;
        }
        text-align:center;
    }
    &.close{
        .more-rule{
            display:none;

        }
        .retract{
            &:before{
                transform: translate(-50%,0) rotate(135deg);
            }
        }
    }
}




.bf-group{
    background:#ff5247;
    padding-top:$rem*20;
    &-hd{
        background-image:url(http://pm1.img.ymatou.com/G02/M0A/31/68/CgvUA1ZCKc-Ack7wAAAfbD9i6RY159_o.png);
        width:100%;
        height:$rem*75;
        margin:0 auto;
        @extend .bg__full;
    }
    &-list{
        padding:$rem*10;
    }
    &-item{
        margin-top:$rem*10;
        position:relative;
        &>.group-pic{
            width:100%;
            height:$rem*435;
            background-size:contain;
            background-color:#fff;
        }
        .group-count{
            &>.img-person{
                background-image:url(http://staticontent.ymatou.com/evt828/images/preHot/product_people_icon.png);
                width:$rem*12;
                height:$rem*12;
            }
            position:absolute;
            bottom:$rem*20;
            left:$rem*30;
            padding:$rem*5 $rem*15;
            color:#fff;
            font-size:$rem*22;
            background: #C33;
            border-radius:$rem*32;
        }
    }
}
//好货大搜罗
.bf-collect{
    background:#ff4766;
    padding-top:$rem*20;
    &-hd{
        background-image:url(http://pm2.img.ymatou.com/G02/M07/65/67/CgvUBVZFpwaAdR2QAAAmnXDN11U495_o.png);
        @extend .bg__full;
        height:$rem*77;
    }
    &-bd{
        padding:0 $rem*10;
        margin-top:$rem*40;
        overflow: hidden;
    }

    &-item{
        width:50%;
        margin-bottom:$rem*10;
        float:left;
        &:nth-child(2n-1){
            padding-right:$rem*5;
        }
        &:nth-child(even){
            padding-left:$rem*5;
        }

    }
}
.collect-pro-wrapper{
    background:#fff;
    padding-bottom:$rem*20;

    .pic{
        height:$rem*310;
          background-size: contain;
    }
    .info{
        padding:0 $rem*22;
        font-size:$rem*22;
        color:#a3a3a3;
        margin-top:$rem*10;
        &>h4{
            color:#333;
            height:$rem*66;
            @include textOverFlow(2);
        }
    }
    .price-wrapper{
        width:100%;
        height:$rem*60;
        line-height:$rem*60;
        border:1px solid #626262;
        border-radius:$rem*60;
        box-shadow: 1px 3px #626262;
        &>span{
            display:inline-block;
            height:100%;
            text-align:center;
            float:left;
        }
        &>:first-child{
            background:#fff;
            color:#ff524b;
            border-top-left-radius: $rem*60;
            border-bottom-left-radius: $rem*60;
            width:40%;
        }
        &>:last-child{
            background:#ff524b;
            color:#fff;
            border-top-right-radius: $rem*60;
            border-bottom-right-radius: $rem*60;
            width:60%;
            &>strong{
                font-size:$rem*35;
                font-weight:bold;
            }
        }
    }
    .national-flag{
        display:inline-block;
        width:$rem*25;
        height:$rem*25;
        background-size:contain;
        background-repeat:no-repeat;
        vertical-align: middle;
        margin-right:$rem*10;
    }
}

//分类
.bf-classify{
    background:#ffbb1a;
    padding-top:$rem*20;
    .title{
        padding:0 $rem*10;
        background:#ffbb1a;
    }
    &-hd{
        height:$rem*60;
        margin-bottom:$rem*10;
        &>h3{
            text-align:center;
            color:#fff;
            font-size:$rem*36;
            font-weight:bold;
            width:$rem*300;
            height:$rem*30;
            border-bottom:2px solid #fff;
            margin: 0 auto;
        }
    }
    &-bd{
        padding:0 $rem*10;
        overflow:hidden;
    }
}

//美妆个护
.beauty-color{
    background:#9436ff;
    .title{
        padding:0 $rem*10;
        background:#9436ff;
    }
}
//母婴
.body-color{
    background:#00a2ff;
    .title{
        padding:0 $rem*10;
        background:#00a2ff;
    }
}
//居家
.home-color{
    background:#00e7a3;
    .title{
            padding:0 $rem*10;
            background:#00e7a3;
        }
}
//居家
.shoes-color{
    background:#ff4766;
    .title{
            padding:0 $rem*10;
            background:#ff4766;
        }
}

//国家馆
.bf-national-museum{
    padding:$rem*10;
    padding-right:0;
    background:#ff4766;
    overflow:hidden;
    .museum-item{
        width:33.3333%;
        height:$rem*334;
        float:left;
        padding-right:$rem*10;
    }
    .ea-wrapper,
    .js-wrapper,
    .australia-wrapper{
      width:100%;
      height:100%;
       @extend .bg__full;
    }

    .ea-wrapper{
        background-color:#ffcc00;
        background-image:url(http://pm1.img.ymatou.com/G02/M00/30/8D/CgvUBFZCKu6AIiAIAABHfQX7EIk288_o.png);
    }
    .js-wrapper{
        background-color:#00eea8;
        background-image:url(http://pm3.img.ymatou.com/G02/M00/30/8D/CgvUBFZCKveAITuDAAA_Pi8jkw8721_o.png);
    }
    .australia-wrapper{
        background-color:#00a2ff;
        background-image:url(http://pm2.img.ymatou.com/G02/M00/30/8C/CgvUBFZCKsqAKKZSAABCe9qBz8g932_o.png);
    }
}


.bf-seller{
    padding:$rem*10 0;
    background:#3d85fe;
    &-hd{
        background-image:url(http://pm3.img.ymatou.com/G02/M04/31/55/CgvUBVZCUQiAb87MAAAP3_lr60g641_o.png);
        height:$rem*95;
        width:100%;
        margin-bottom:$rem*20;
    }
    &-ft{
        background-image:url(http://pm3.img.ymatou.com/G02/M03/31/6B/CgvUA1ZCKmKAazflAACvNCqTur0075_o.jpg);
        width:100%;
        height:$rem*169;
        margin:0 auto;
        @extend .bg__full;

    }

    &-list{
        padding:0 $rem*10;
    }
    &-item{
        margin-bottom:$rem*10;
        width:100%;
        height:$rem*520;
        background-size: contain;
        position:relative;
        &>.load-hold{
            width:100%;
            height:100%;
        }
        .coupon{
           position:absolute;
           z-index:2;
           right:$rem*50;
           top:$rem*30;
           width:$rem*204;
           height:$rem*93;
        }
    }
}

.bf-tab{
    position:fixed;
    left:0;
    right:0;
    bottom:$rem*6;
    font-size:$rem*28;
    transition: transform 0.25s ease-in-out;
    will-change:transform;
    z-index:3;
    &.fixed-out{
        transform: translate(0, 100%);
        bottom:0!important;
    }
    &-wrapper{
        height:$rem*230;
        position:relative;
        background-color: #3D85FE;
        &.show{
            .bf-tab{
                transform: translate(0, 100%);
                bottom:0!important;
            }
        }
        &.bf-package{
            .bf-tab{
                bottom:$rem*14;
                font-size:$rem*20;
            }

            li{
                &:nth-child(2){
                    a{
                        padding-left:$rem*20;
                        text-align:left;
                    }
                }
                &:nth-child(3){
                   a{
                    text-align:right;
                    padding-right:$rem*10;
                   }
                }
            }
            .black-five-icon{
               //width:$rem*165;
               //height:$rem*167;
               width:$rem*120;
               height:$rem*122;
               position:fixed;
               //margin-right:$rem*-82;
               margin-right:$rem*-60;
               right:50%;
               bottom:0;
               transition: all 0.35s ease-in-out;
               z-index:4;
               will-change:transform,left;
               background-image:url(http://pm1.img.ymatou.com/G02/M05/31/67/CgvUA1ZCKXOAVDqnAAAtno6Bg4k072_o.png);
                @extend .bg__full;
            }
            .bf-receive-bg{
                background-image:url(http://pm3.img.ymatou.com/G02/M0B/31/69/CgvUA1ZCKg6ALy4sAACeaWObI0U245_o.png);
                height:$rem*226;
                position:fixed;
                bottom:0;
                left:0;
                right:0;
                z-index:2;
                transition: transform 0.25s ease-in-out;
                transform: translate(0, 100%);
                 will-change:transform;
                @extend .bg__full;
            }
            .bf-receive-hand{
                background-image:url(http://pm1.img.ymatou.com/G02/M0A/30/C9/CgvUBVZCKemAcxlfAAAHxqaMNFE056_o.png);
                right:$rem*7;
                bottom:$rem*2;
                position:fixed;
                width:$rem*66;
                height:$rem*77;
                z-index:4;
                display:none;
                animation: enlarge 1.2s 6 alternate;
                will-change:transform;
                @extend .bg__full;
            }

            &.show{
                .bf-receive-bg{
                    transform: translate(0, 0);
                }
                .bf-receive-hand{
                    display:block;
                }
                .black-five-icon{
                    bottom: $rem*14;
                    left: inherit;
                    right: $rem*22;
                    margin-right: 0;
                    width:$rem*165;
                    height:$rem*167;
                }
            }
        }

    }

    &-hd{
        position:relative;
        height:$rem*86;
        z-index:2;
        span{//小洋人
            z-index:2;
            position:relative;
            &:before{
                content:'';
                position:absolute;
                left:$rem*11;
                top:0;
                width:$rem*38;
                height:$rem*68;
                animation: sign-sway 3s infinite alternate;
                will-change:transform;
                background-image:url(http://pm5.img.ymatou.com/G02/M05/31/66/CgvUA1ZCKVWAetUkAAAFuwWptag842_o.png);
                @extend .bg__full;
            }
            &:after{
                content:'';
                position:absolute;
                left:$rem*38;
                //bottom:$rem*-12;
                top:$rem*28;
                background-image:url(http://pm3.img.ymatou.com/G02/M00/30/8A/CgvUBFZCKjWAc4pCAAALfLsGNHE376_o.png);
                width:$rem*70;
                height:$rem*70;
                 @extend .bg__full;
            }
        }

        &:after{
            content:'';
            background-image:url(http://pm5.img.ymatou.com/G02/M08/31/6B/CgvUA1ZCKoqABGT2AAATY6MDorc802_o.png);
            @extend .bg__full;
            position:absolute;
            width:$rem*248;
            height:$rem*86;
            right:$rem*25;
            bottom:$rem*-10;
        }
    }
    &>ul{
        position:relative;
        &:before,
        &:after{
            content:'';
            position:absolute;
        }
        &:before{
            width:$rem*40;
            height:$rem*30;
            left:$rem*10;
            top:$rem*5;
             @extend .bg__full;
            background-image:url(http://pm4.img.ymatou.com/G02/M08/30/CD/CgvUBVZCKqaAT6hnAAABXeGqI-g295_o.png);
        }
        &:after{
           width:$rem*36;
           height:$rem*30;
           right:$rem*10;
           bottom:$rem*8;
           background-image:url(http://pm5.img.ymatou.com/G02/M00/30/8C/CgvUBFZCKrqAWNnxAAABdKR3zso348_o.png);
            @extend .bg__full;
        }
        height:$rem*94;
        line-height:$rem*94;
        color:#fff;
        background:#363636;
        text-align:center;
        border-radius:$rem*94;
        box-shadow: 0 $rem*6 #6F6F6F;
    }

    li{
        width:25%;
        float:left;
        overflow:hidden;
        a{
            display:block;
            height:100%;
            width:100%;
            color:#fff;
        }
        &:first-child{
            border-top-left-radius:$rem*94;
            border-bottom-left-radius:$rem*94;
        }
        &:last-child{
            border-top-right-radius:$rem*94;
            border-bottom-right-radius:$rem*94;
        }
        &.active{
           a{
                background:#e7392d;
            }
        }
    }
}
//气球摆动
@keyframes sign-sway {
  0% {

    transform: translateX(10%) rotate(-10deg);
  }

  100% {

    transform: translateX(30%)  rotate(10deg);
  }
}
//领取手动
@keyframes enlarge {
  to{
    transform: scale(.8);
  }

  from {
    transform: scale(1.2);
  }
}
//领取礼包
.receive-package{
    &-mask{
        @extend .mask;
    }
    &-dialog{
        background-image:url(http://pm1.img.ymatou.com/G02/M00/30/88/CgvUBFZCKcKAB2RwAABKjPnX5zw700_o.png);
        @extend .bg__full;
        width:$rem*750;
        height:$rem*596;
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: 100;
        margin-left:-$rem*375;
        margin-top:-$rem*298;
        background-position: top;
        display:none;
        &.open{
            display:block;
        }
        &-bd{
            position:relative;
            height: 100%;
            .content{
                h4{
                    text-align:center;
                    font-size:$rem*48;
                    font-weight:bold;
                    color:#410005;
                    white-space: nowrap;
                    &.small{
                        font-size:$rem*30;
                        white-space: initial;
                    }
                    &.bg{
                        background-image:url(http://pm1.img.ymatou.com/G02/M00/65/0B/CgvUBFZFpgaAXBklAAAPrvdEPCk464_o.png);
                        @extend .bg__full;
                        width:100%;
                        height:$rem*51;
                        background-position:center;
                    }
                }
                .no-chance{
                    background-image:url(http://pm5.img.ymatou.com/G02/M0A/30/C9/CgvUBVZCKfSAXDcHAAAe3NhnTns160_o.png);
                    @extend .bg__full;
                    width:$rem*192;
                    height:$rem*168;
                    margin:0 auto;
                }
                .coupon-bg{
                    background-image:url(http://pm5.img.ymatou.com/G02/M03/31/6A/CgvUA1ZCKkKAfLwIAAAHgDsXa8s146_o.png);
                    @extend .bg__full;
                    width:$rem*298;
                    height:$rem*142;
                    margin:$rem*20 auto;
                    padding-top:$rem*20;
                    color:#fff;
                    padding:0 $rem*42;
                    font-size:$rem*32;
                    text-align:center;
                    strong{
                        font-size:$rem*45;
                    }
                    sub{
                        font-size:$rem*23;
                    }
                    &>:first-child{
                        border-bottom:2px dashed #FFF;
                    }
                }
                .txt{
                    padding-left:$rem*50;
                    font-size:$rem*14;
                    color:#410005;
                    &>strong{
                       font-size:$rem*16;
                       color:#fe4855;
                       font-weight:bold;
                    }
                }
                position:absolute;
                width:$rem*410;
                height:$rem*303;
                right:$rem*25;
                top:$rem*65;
                &.package-content-bg{
                    background-image:url(http://pm5.img.ymatou.com/G02/M09/65/4C/CgvUBVZFphKAPInzAAAzXOApmDs842_o.png);
                    @extend .bg__full;

                }

            }
        }
        .share-btn,
        .close-btn{
             position:absolute;
             width:$rem*360;
             height:$rem*96;
             line-height:$rem*96;
             bottom:0;
             border-radius:$rem*16;
             font-size:$rem*55;
             color:#410005;
             text-align:center;
             font-weight:bold;
             &.center-btn{
                 right: 50%;
                 transform: translate(50%,0);
             }
        }
        .close-btn{
            right:$rem*4;
            background-color:#01efef;
            box-shadow:0 $rem*14 #00a3a3;
        }
        .share-btn{
            color:#fff;
            left:$rem*4;
            background-color:#fe4855;
            box-shadow:0 $rem*14 #b83740;
        }
    }
}

.load-hold{
    background-image:url(http://pm3.img.ymatou.com/G02/M09/65/F0/CgvUA1ZFpjaAH9EeAABa9i1evyQ656_o.jpg);
    @extend .bg__full;
    background-size: cover;
}

.ymtui-toast{
    position: fixed;
    z-index: 9999;
    top: 50%;
    left:50%;
    color:#fff;
    text-align: center;
    border-radius: $rem*4;
    padding:$rem*6 $rem*12;
    font-size:$rem*28;
    background-color: rgba(0, 0, 0, 0.58);
    transition: transform 0.25s ease-in-out;
    transform:translate(-50%,-50%) scaleY(0);
    word-break: break-all;
    &.show{
        transform:translate(-50%,-50%) scaleY(1);
    }
}


.ymt-butler{
    background-image:url(http://pm2.img.ymatou.com/G02/M09/65/4F/CgvUBVZFpiqAD7bMAAAZLjpmue8953_o.png);
    @extend .bg__full;
    width:$rem*101;
    height:$rem*126;
    position:fixed;
    bottom:$rem*220;
    right:$rem*0;
    transition: transform 0.35s ease-in-out;
    will-change:transform;
    transform:translate(100%,0);
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
    border-radius: $rem*50;
    &.show{
        transform:translate(0,0);
    }
}
